
window.addEventListener("load", function () {

    var big = document.querySelector(".into")
    var mmd = document.querySelector(".scop")
    var mask = document.querySelector(".boxx")

    mmd.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    mmd.addEventListener("mousemove",function(e){

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;

        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 1.5;

        var maskMax = mmd.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';

        var bigIMg = document.querySelector('.box9');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';


    })


    // 底部运行js
    
    var dong = document.querySelector("footer")
    var tu = document.querySelector("button")
    var biao = document.querySelector(".xxx")
    var fl = 0;
    tu.onclick = function () {
        if (fl == 0) {
            biao.style.transform = 'rotate(180deg)';
            dong.style.bottom = "-2px"
            fl = 1;
        } else {
            biao.style.transform = 'rotate(0deg)';
            dong.style.bottom = "-60px"
            fl = 0;
        }
    }


})